<template>
	<view class="intergral_box">
		<!-- 头部背景 -->
		<view class="intergral_top">
			爆款推荐
			<span>省钱省心限时兑换</span>
		</view><!-- intergral_top -->
		<view class="intergral_center">
			<view class="intergral_center_box">
				<view class="intergral_center_box_menu" v-for="(item,keys) in center_box_menu" :key="keys">
						<image :src="item.image" mode="" class="intergral_image"></image>
							<view class="intergral_center_box_one">
								{{item.one}}
							</view>
							<view class="intergral_center_box_images">
								<image :src="item.images" mode="" class="intergral_images"></image>
								<view class="intergral_center_box_titie">{{item.title}}</view>
							</view>
							<view class="intergral_center_box_qian">
								<span class="intergral_center_box_qian_hong">{{item.qian}}</span>
								<s class="intergral_center_box_qian_hui">{{item.qians}}</s>
								<span class="intergral_center_box_qians">
									{{item.mashang}}
								</span>
							</view>
						
						
						
				</view><!-- intergral_center_box_menu -->
			</view><!-- intergral_center_box -->
		</view>			<!-- intergral_center -->
	</view><!-- intergral_box -->
	
</template>

<script>
	export default {
		data() {
			return {
				center_box_menu:[
					{
						image:"/static/images/nf.jpg",
						one:"新一代扫地机器人",
						images:"/static/images/huohh.png",
						title:"已兑换件",
						qian:"￥",
						qians:"￥",
						mashang:"马上兑换"
					},
					{
						image:"/static/images/nf.jpg",
						one:"新一代扫地机器人",
						images:"/static/images/huohh.png",
						title:"已兑换件",
						qian:"￥",
						qians:"￥",
						mashang:"马上兑换"
					},
					{
						image:"/static/images/nf.jpg",
						one:"新一代扫地机器人",
						images:"/static/images/huohh.png",
						title:"已兑换件",
						qian:"￥",
						qians:"￥",
						mashang:"马上兑换"
					},
					{
						image:"/static/images/nf.jpg",
						one:"新一代扫地机器人",
						images:"/static/images/huohh.png",
						title:"已兑换件",
						qian:"￥",
						qians:"￥",
						mashang:"马上兑换"
					},
					{
						image:"/static/images/nf.jpg",
						one:"新一代扫地机器人",
						images:"/static/images/huohh.png",
						title:"已兑换件",
						qian:"￥",
						qians:"￥",
						mashang:"马上兑换"
					}
				]
				
				
		}
		},
		onLoad() {
	
		},
		methods: {
			// gotoLunBo() {
			// 	uni.switchTab({
			// 		url: 'cart'
			// 	})
			// }
		},
	}
	
	
</script>

<style lang="scss">
	.intergral_box{
		position: relative;
		.intergral_top{
		
			background: url(../../static/images/group/group_list_bg.png)10rpx no-repeat;
			background-size: 100% 100%;
			color: white;
			line-height: 100rpx;
			text-indent:40rpx ;
			height:350rpx;	
			span{
				float: right;
				margin-right:40rpx;
			}
		}
		.intergral_center{
			background-color:#F5F5F5 ;
			height:100vh;
				
			.intergral_center_box{
				
				position: absolute;
				top:120rpx;
				width:90%;
				left:5%;
				background-color: #FFFFFF;
				border-radius: 17rpx;
				.intergral_center_box_menu{
					overflow: hidden;
				}
				
				.intergral_center_box_one{
					margin-top:20rpx;
					float: left;
				}
				.intergral_image{
					width:300rpx;
					height:300rpx;
					margin:20rpx;
					border-radius: 10rpx;
					float: left;
			
				
				}
				.intergral_center_box_images{
					float: left;
					.intergral_center_box_titie{
					color: #D0782A;
					border-radius: 15rpx;
					background-color: #FFEDCA;
					float: right;
					margin-left:15rpx;
					}
					image{
						vertical-align: middle;
					}
					margin-top:50rpx;
					line-height: 50rpx;
					margin-bottom:50rpx;
					
					
				}
				.intergral_center_box_qian{
					float: left;
					width:44%;
					.intergral_center_box_qian_hong{
						color: red;
					}
					.intergral_center_box_qian_hui{
						font-weight: 500;color: #999999;
						margin:10rpx;
						margin-right:15rpx;
					}
					font-weight: 700;
					.intergral_center_box_qians{
						background:linear-gradient(to right,#FD7543,#F7A453);
						color: white;
						line-height: 80rpx;
						border-radius: 30rpx;
						padding:10rpx 30rpx;
						
					}
				}
				.intergral_images{
					width:50rpx;
					height:50rpx;
				}
			}
		}
		
		
	}
	
	
</style>
